<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="企业名称：" prop="belongOrgId">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="项目名称：" prop="name" >
                        <Input type="text"  class="query-form-el" v-model="dataToQuery.name" ></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <!-- <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text"  >展开∨</Button> -->
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal :title="mode === 'view'? '建设项目三同时详情':'建设项目三同时'" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=600 :styles="{height:'475px'}"  class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dataToView" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?null:'top'" :label-width="mode === 'view'?120:null">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="企业名称：" prop="belongOrgId">
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
<!--                                    <Input v-else v-model="dataToView.companyName" type="text" readonly></Input>-->
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId"
                                                  :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="项目名称：" prop="name" >
                                    <div v-if="mode === 'view'">{{dataToView.name}}</div>
                                    <Input v-else v-model="dataToView.name" type="text" />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="项目分类：" prop="type" >
                                    <div v-if="mode === 'view'">{{dataToView.category}}</div>
                                    <Input v-else v-model="dataToView.category" type="text" />
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="项目类型：" prop="type" >
                                    <div v-if="mode === 'view'">{{dataToView.type}}</div>
                                    <Input v-else v-model="dataToView.type" type="text" />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="项目当前阶段：" prop="type" >
                                    <div v-if="mode === 'view'">{{dataToView.cruStage}}</div>
                                    <Input v-else v-model="dataToView.cruStage" type="text" />
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label="项目开始时间：" prop="project" >
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.startTime)}}</div>
                                    <DatePicker v-else placeholder="请选择项目开始时间" v-model="dataToView.startTime" class="query-form-el" placement="top-start"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填表人：' prop='registrant'>
                                    <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                                    <Input v-else type='text' v-model='dataToView.registrant' readonly></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填表时间：' prop='registTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="w" v-model='dataToView.registTime' readonly></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dataToView')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'

    export default {
        name: "threeSimProject",
        components:{
            cascaderDom
        },
        data() {
            return{
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    {
                        title: '企业名称',
                        width: 340,
                        align: 'center',
                        key:'companyName',
                    },
                    {
                        title: '项目名称',
                        minWidth: 150,
                        align: 'center',
                        key:'name'
                    },
                    {
                        title: '项目分类',
                        width: 180,
                        align: 'center',
                        key:'category'
                    },
                    {
                        title: '项目类型',
                        width: 180,
                        align: 'center',
                        key:'type'
                    },
                    {
                        title: '项目当前阶段',
                        width: 180,
                        align: 'center',
                        key:'cruStage'
                    },
                    {
                        title: '项目开始时间',
                        width: 180,
                        align: 'center',
                        key:'startTime',
                        render: (h, data) => {
                            console.log(data.row)
                            return h('span', formatDate(new Date(data.row.startTime), "yyyy-MM-dd"))
                        }
                    },
                    this.getActionColumns(),
                ],
                ruleCustom : {
                    companyId: [
                        { required: true, message: '  ', trigger: 'blur' }
                    ]
                },
                // api
                queryUrl:Api.queryThreeSimProject,
                deleteUrl:Api.deleteThreeSimProject,
                updateUrl:Api.updateThreeSimProject,
                saveUrl:Api.saveThreeSimProject,
            }
        },
        mounted() {
            if(this.$route.fullPath == "/envThreeSimProject/create") {
                this.mode = 'add';
                this.dialogShow = true;
            }
            this.setTableHeight();
            this.query();
        },
        methods:{
            ...pageCommonFunction,
            deleteData(params) {
                let url = Api.deleteThreeSimProject;
                this.$http.delete(url +'/'+ params.row.projectId, {params: {}}).then((res) => {
                    if (res.data.status === 200) {
                        this.$Message.success('成功');
                        this.query()
                    }else if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                }).catch(e => {
                    this.$Message.error('请求失败' + e);
                })
            },
            query() {
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.dataToQuery)));

                let url = Api.queryThreeSimProject;
                this.$http.get(url, {params: data}).then((res) => {
                    if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.mode === 'add'){
                            this.$http.post(Api.saveThreeSimProject, this.dataToView).then((res) => {
                                if (res.data.status === 200) {
                                    this.$Message.success('成功');
                                    this.dialogShow = false;
                                    this.query()
                                }else if (res.data.status === 201) {
                                    this.$Message.error(res.data.msg);
                                }
                            }).catch(e => {
                                this.query();
                                this.$Message.error("数据获取失败")
                            })
                        }else{
                            this.$http.post(Api.updateThreeSimProject, this.dataToView).then((res) => {
                                if (res.data.status === 200) {
                                    this.$Message.success('成功');
                                    this.dialogShow = false;
                                    this.query()

                                }else if (res.data.status === 201) {
                                    this.$Message.error(res.data.msg);
                                }
                            }).catch(e => {
                                this.query();
                                this.$Message.error("数据获取失败")
                            })
                        }
                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            }
        },
        watch:{
        },

    }
</script>

<style lang='css' scoped>
</style>
